<template>
    <div class="choose" v-loading="loading">

        <div class="choose-models" v-for="(product,index) in clothes" :key="product.design_id">
            <CommonTemplatePreview :pieces.sync="product.piece_list" :models="product.model_list" :baseColor="getBaseColor(product)" size="preview" />

            <div class="choose-select">
                <h2 class="choose-select-title">
                    <img v-if="index == 0" src="@/assets/images/synchronize/synchronize-title.png" alt="">
                    <img v-if="index == 1" src="@/assets/images/synchronize/synchronize-title2.png" alt="">
                    <span v-text="product.title"></span>
                </h2>
                <!-- 颜色 -->
                <dl class="choose-color">
                    <dt :class="{active: product.color_list.length == product.select_color.length}">
                        <strong>Select colors</strong>
                        <span @click="setSelectColor(product)">
                            <svg-icon name="checkbox-active" alt="" />
                            <em>All colors</em>
                        </span>
                    </dt>
                    <dd v-for="item in product.color_list" :key="item.color_id" @click="setSelectColor(product,item.color_id)">
                        <CommonColorBlock :color="item" :active="product.select_color.indexOf(item.color_id) >= 0"></CommonColorBlock>
                    </dd>
                </dl>

                <!-- 尺码 -->
                <dl class="choose-size">
                    <dt :class="{active: product.sizes_list.length == product.select_sizes.length}">
                        <strong>Select sizes</strong>
                        <span @click="setSelectSizes(product)">
                            <svg-icon name="checkbox-active" alt="" />
                            <em>All sizes</em>
                        </span>
                    </dt>
                    <dd v-for="item in product.sizes_list" :key="item.size_id" @click="setSelectSizes(product, item.size_id)" :class="{ active: product.select_sizes.indexOf(item.size_id) >= 0 }">
                        <svg-icon name="checkbox-active" />
                        <span v-text="item.size_name"></span>
                    </dd>
                </dl>

                <!-- 库存提示 -->
                <dl class="choose-variant" v-show="getOutStock(product).length > 0">
                    <dt>
                        <strong>Out of stock variant</strong>
                        <small>* Out of stock items will not be synced to your store</small>
                    </dt>
                    <dd>
                        <p v-for="(item, index) in getOutStock(product)" :key="index">
                            <em :style="'background:' + item.color_num"></em>
                            <span v-for="size in item.sizes" :key="size.size_id" v-text="size.size_name"></span>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="choose-remove" v-show="index >= 1" @click="removeProduct(product)"><svg-icon name="remove" /></div>

        </div>

        <!-- 一次性只能同步不超过100个的变体 -->
        <div class="choose-notify" v-show="variants_count > 100">
            <img src="@/assets/images/synchronize/synchronize-notify.png">
            <span>You can synchronize no more than 100 variants each time. Please adjust the number of variants you select.</span>
        </div>

        <!-- 添加套装，只有数量为1时可以 -->
        <div class="choose-insert" v-show="clothes.length <2">
            <h2>Create a product bundle</h2>
            <p>Creating a product bundle allows you to sell two products at the same time with only one link.</p>
            <button @click="openProductDialog()">
                <svg-icon name="user-template" />
                <span>Add product</span>
            </button>
        </div>

        <!-- 修改名称 -->
        <SynchronizeRename v-if="clothes.length >= 2" />

        <!-- 选择商品 -->
        <OrderProductSelect type="store" v-model="add_product" :disabled="select_disabled" @selectDesign="insertProduct($event)" />

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeIndex",
    data () {
        return {
            loading: false,
            add_product: null,
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            mockups: "mockups",
            setting: "setting",
            shop: "shop",
        }),

        // 变体数量
        variants_count () {
            return this.clothes.reduce((count, product) => {
                const currert = product.inventory_list.filter(item => {
                    if (item.quality <= -999) {
                        // 库存不足
                    } else if (product.select_color.indexOf(item.color_id) < 0) {
                        // 未选择颜色
                    } else if (product.select_sizes.indexOf(item.size_id) < 0) {
                        // 未选择的尺码
                    } else {
                        return true;
                    }
                });
                return count + currert.length;
            }, 0)
        },

        select_disabled () {
            return this.clothes.map(i => ({ type: 'temp', id: i.design_id }))
        }
    },
    methods: {

        // 主图
        getMainModel (product) {
            const model_list = product.model_list || [];
            return model_list[0];
        },
        // 主色
        getBaseColor (product) {
            const color_list = product.color_list || [];
            const base_color = product.base_color || '';
            return color_list.filter(i => i.color_id == base_color)[0] || color_list[0];
        },

        // 选择颜色
        setSelectColor (product, color_id) {
            if (color_id) {
                // 单个选或取消
                if (product.select_color.indexOf(color_id) < 0) {
                    this.$store.commit("synchronize/SET_SELECT_COLOR", {
                        product: product,
                        select_color: [...product.select_color, color_id]
                    })
                } else {
                    this.$store.commit("synchronize/SET_SELECT_COLOR", {
                        product: product,
                        select_color: product.select_color.filter(i => i != color_id)
                    })
                }
            } else {
                // 全选或全不选
                if (product.color_list.length == product.select_color.length) {
                    this.$store.commit("synchronize/SET_SELECT_COLOR", {
                        product: product,
                        select_color: []
                    })
                } else {
                    this.$store.commit("synchronize/SET_SELECT_COLOR", {
                        product: product,
                        select_color: product.color_list.map(item => item.color_id)
                    })
                }
            }

        },
        // 选择尺码
        setSelectSizes (product, size_id) {

            if (size_id) {
                // 单个选或取消
                if (product.select_sizes.indexOf(size_id) < 0) {
                    this.$store.commit("synchronize/SET_SELECT_SIZES", {
                        product: product,
                        select_sizes: [...product.select_sizes, size_id]
                    })
                    // product.select_sizes.push(size_id)
                } else {
                    this.$store.commit("synchronize/SET_SELECT_SIZES", {
                        product: product,
                        select_sizes: product.select_sizes.filter(i => i != size_id)
                    })
                }
            } else {
                // 全选或全不选
                if (product.sizes_list.length == product.select_sizes.length) {
                    this.$store.commit("synchronize/SET_SELECT_SIZES", {
                        product: product,
                        select_sizes: []
                    })
                } else {
                    this.$store.commit("synchronize/SET_SELECT_SIZES", {
                        product: product,
                        select_sizes: product.sizes_list.map(item => item.size_id)
                    })

                }
            }
        },

        // 库存不足的
        getOutStock (product) {
            const result = new Map();

            // 库存<=-999的不可下单
            product.inventory_list.map(item => {
                if (item.quality > -999) {
                    // 可显示的
                } else if (product.select_color.indexOf(item.color_id) < 0) {
                    // 未选择颜色
                } else if (product.select_sizes.indexOf(item.size_id) < 0) {
                    // 未选择的尺码
                } else {
                    const active = result.get(item.color_id);
                    if (active) {
                        active.sizes.push(item);
                    } else {
                        result.set(item.color_id, {
                            color_num: item.color_num,
                            color_id: item.color_id,
                            sizes: [item]
                        })
                    }
                }
            })
            return Array.from(result, ([key, value]) => value);
        },

        // 打开弹窗
        openProductDialog () {
            this.add_product = {};
        },
        // 删除设计
        removeProduct (product) {
            this.$store.commit("synchronize/DEL_PRODUCT", product)
        },

        // 插入设计
        insertProduct (products) {
            this.loading = true;
            Promise.all(products.map(item => this.$store.dispatch("synchronize/getDataByTemp", item.design_id))).then(res => {
                this.loading = false;
            }).catch(error => {
                console.log(error)
            });
        },

        // 颜色减去的就把相关图片给干掉
        setMockupUpDate () {
            // 删除原图片不选中的情况
            // 有数据，则判断是否要删除
            if (this.mockups.length == 0) {
                this.$store.commit("synchronize/SET_MOCKUPS");
            } else {
                const mockups = [];
                const colors_map = new Map();

                this.clothes.map((item) => {
                    item.select_color.map((color_id) =>
                        colors_map.set(item.design_id + "-" + color_id, true)
                    );
                });
                this.mockups.map((item) => {
                    if (item.type == "size") {
                        // 尺码的直接添加
                        mockups.push(item);
                    } else if (
                        colors_map.get(item.design_id + "-" + item.color_id)
                    ) {
                        mockups.push(item);
                    }
                });
                this.$store.commit("synchronize/SET_MOCKUPS", mockups);
            }

        },

        // 检查
        checkup () {

            const color_empty = this.clothes.filter(p => p.select_color.length == 0);
            const sizes_empty = this.clothes.filter(p => p.select_sizes.length == 0);

            if (color_empty.length > 0) {
                this.$uxMessage.error({
                    message: "Please select at least one color",
                    duration: 5000,
                });
                return false;
            } else if (sizes_empty.length > 0) {
                this.$uxMessage.error({
                    message: "Please select at least one size",
                    duration: 5000,
                });
                return false;
            } else if (this.variants_count > 100) {
                this.$uxMessage.error({
                    message: "No more than 100 variants per product are allowed.",
                    duration: 5000,
                });
                return false;
            } else {
                // 检查更新
                this.setMockupUpDate();
            }
        },

    },
    created () {
        this.$on('global:SYNCHRONIZE_CHECK', this.checkup)
    },
};
</script>
<style lang="scss" scoped>
.choose {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
    padding-top: 24px;
}

.choose-models {
    display: flex;
    align-items: center;
    position: relative;
    padding: 8px 0;
    & + .choose-models {
        border-top: 1px dashed rgba(151, 151, 151, 0.4);
    }
    & > .template-preview {
        width: 280px;
        height: 280px;
        margin: 8px 0;
        position: relative;
        overflow: hidden;

        &::v-deep .custom-icon {
            width: 28px;
            height: 28px;
        }
    }

    .choose-select-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        padding: 8px 0;
        img {
            width: 18px;
            height: 18px;
            margin-right: 4px;
        }
        span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .choose-select {
        margin-left: 48px;
        flex: 1;
        max-width: calc(100% - 400px);
        dl {
            display: flex;
            flex-wrap: wrap;
            margin-top: 24px;
        }

        dt {
            display: flex;
            width: 100%;
            line-height: 16px;
            font-family: Roboto-Medium, Roboto;
            font-size: 14px;
            padding-bottom: 8px;

            strong {
                font-weight: 500;
                color: #000000;
                white-space: nowrap;
            }

            span {
                padding-left: 16px;
                display: flex;
                cursor: pointer;
                font-weight: 400;
                color: #555555;
                white-space: nowrap;
                svg {
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    box-sizing: border-box;
                    vertical-align: top;
                    background: #ffffff;
                    border-radius: 2px;
                    padding: 2px;
                    margin-right: 4px;
                    border: 1px solid #c7c7c7;
                    fill: #fff;
                }
            }

            small {
                vertical-align: top;
                font-size: 12px;
                margin-left: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #f44336;
                background: rgba(244, 67, 54, 0.1);
                line-height: 16px;
                padding: 0 4px;
                border-radius: 4px;
            }

            &.active span svg {
                fill: #000;
            }
        }

        dl.choose-color dd {
            margin: 8px 12px 8px 0;
            position: relative;
            cursor: pointer;
        }

        dl.choose-size dd {
            display: flex;
            margin: 8px 16px 8px 0;
            position: relative;
            cursor: pointer;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;

            & > svg {
                width: 16px;
                height: 16px;
                display: inline-block;
                box-sizing: border-box;
                vertical-align: top;
                background: #ffffff;
                border-radius: 2px;
                padding: 2px;
                margin-right: 4px;
                border: 1px solid #c7c7c7;
                fill: #fff;
            }

            &.active > svg {
                fill: #000;
            }
        }

        dl.choose-variant dd {
            display: flex;
            line-height: 24px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            p {
                display: flex;
                margin: 8px 16px 8px 0;
                em {
                    width: 22px;
                    height: 22px;
                    background: #ffffff;
                    border-radius: 2px;
                    border: 1px solid rgba(0, 0, 0, 0.06);
                    margin-right: 2px;
                }

                span {
                    margin-left: 6px;
                    font-size: 14px;
                }
            }
        }
    }

    .choose-remove {
        width: 24px;
        height: 24px;
        margin: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
            width: 18px;
            height: 18px;
            color: #555;
        }

        &:hover svg {
            color: #d86788;
        }
    }
}

.choose-insert {
    margin: 0 0 32px;
    padding: 32px 32px 32px 328px;
    border-radius: 6px;
    border: 1px dashed rgba(195, 195, 195, 0.7);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 280px;
        height: 100%;
        background-color: #fafafa;
        background-image: url(@/assets/images/synchronize/synchronize-create.png);
        background-size: 80px 80px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    & > h2 {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }
    & > p {
        margin-top: 10px;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 14px;
    }
    & > button {
        margin-top: 22px;
        height: 32px;
        padding-left: 12px;
        padding-right: 12px;
        display: flex;
        align-items: center;
        font-size: 14px;
        svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
    }
}

.choose-notify {
    margin: 0 auto 32px;
    background: #fffbf5;
    border-radius: 6px;
    border: 1px solid #e9e3e0;
    padding: 12px 16px;
    display: flex;

    img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    span {
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
    }
}
</style>
